<template>
  <div class="body">
    <div class="title">
      <i class="iconfont">&#xe616; </i> 好友魅力TOP10
      <div class="chart-container" ref="chart" id="chart"></div>
    </div>
  </div>
</template>
<script>
// 引入echarts组件
import * as echarts from 'echarts'
// 使用vuex获取个人数据
import store from '@/store'
// 调用获取排行榜数据接口
import { getFriendFans } from '@/api/rank'
export default {
  name: 'wordlist-rank',
  data () {
    return {
      profile: '',
      chartData: []
    }
  },
  methods: {

  },
  created () {
    this.profile = store.state.user.profile
    // 获取排行榜数据
    getFriendFans().then((res) => {
      // this.chartData = res.data.rank
      // console.log(res.data.rank)
      this.chartData = res.data.rank
      for (let i = 0; i < res.data.rank.length; i++) {
        this.chartData[i].fans = JSON.parse(this.chartData[i].fans).length
      }
      // console.log(res.data.rank.length)
      // 基于准备好的DOM节点，初始化echarts实例
      // 获取完数据后创建图表
      // console.log(this.chartData)
      const chart = echarts.init(this.$refs.chart)

      // 指定图表的配置项和数据
      // 只取前十名数据
      const topTenData = this.chartData.sort((a, b) => b.fans - a.fans).slice(0, 10)

      const option = {
        // 设置图表的标题
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#ff8095',
            fontSize: 24,
            fontFamily: '钉钉进步体'
          }
        },
        // 设置图表的提示框
        tooltip: {
          trigger: 'axis'
        },
        // 设置图表的图例
        legend: {
          data: ['粉丝数'],
          show: true
        },
        // 设置柱状图的数据系列
        series: [
          {
            name: '粉丝数',
            type: 'bar',
            // 开启动态排序
            realtimeSort: true,
            data: topTenData.map((item) => item.fans),
            // 设置柱状图的样式
            itemStyle: {
              color: '#ff8095',
              barBorderRadius: [5, 5, 0, 0]
            },
            label: {
              show: true,
              position: 'top',
              color: '#ff8095',
              fontSize: 14,
              fontWeight: 'bold',
              fontFamily: '钉钉进步体',
              formatter: '{c}'
            }
          }
        ],
        // 设置x轴的相关配置
        xAxis: {
          type: 'category',
          data: topTenData.map((item) => item.username),
          axisLabel: {
            fontFamily: '钉钉进步体',
            color: '#ff8095',
            fontSize: 14,
            rotate: -30,
            interval: 0
          },
          axisTick: {
            show: false
          },
          // x轴从上往下 从小往大
          inverse: false,
          animationDuration: 300,
          animationDurationUpdate: 300,
          splitLine: {
            show: false
          }
        },
        // 设置y轴的相关配置
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 粉丝数',
            fontFamily: '钉钉进步体',
            color: '#ff8095',
            fontSize: 14
          },
          splitLine: {
            lineStyle: {
              color: '#ff8095',
              opacity: 0.5
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ff8095'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#ff8095'
            }
          }
        },
        // 设置柱状图的水平方向
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        animationDuration: 1000,
        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }

      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option)
    })
  }
}
</script>
<style scoped lang="less">
.body{
  padding-top: 20px;
  padding-left: 20px;
  height: 500px;
  width: 1000px;
  .title{
    font-family: '钉钉进步体';
    line-height: 30px;
    font-size: 24px;
    color: #ff8095;
    .iconfont{
      position: relative;
      top: 2px;
      font-size: 30px;
      color: #ff8095;
    }
    span{
      font-size: 10px;
      color: gray;
    }
  }

  //echarts图表
  .chart-container {
    width: 700px;
    height: 350px;
    color: #ff8095;
  }
}

</style>
